const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const WebpackBar = require("webpackbar");
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");

const isDev = process.env.mode === "development";
const modeTool = isDev
  ? {
      mode: "development",
      devtool: "source-map",
      devServer: {
        contentBase: path.join(__dirname, "dist"),
        compress: true,
        open: true,
        writeToDisk: true,
        hot: true,
        port: 9000,
      },
    }
  : { mode: "production" };
modeTool.watch = process.env.watch === "true";

module.exports = Object.assign({}, modeTool, {
  entry: {
    index: "./src/index.js",
    index2: "./src/index2.js",
  },
  output: {
    // filename: isDev ? "[name].bundle.js" : "[name].bundle.[contenthash].js",
    filename: isDev ? "[name].b.js" : "[name].b.[contenthash:3].js",
    chunkFilename: isDev ? "[name].c.js" : "[name].c.[chunkhash:3].js",
    path: path.resolve(__dirname, "dist"),
    globalObject: "this",
    libraryTarget: "umd",
  },
  optimization: {
    // runtimeChunk: {
    //     name: 'runtime', // necessary when using multiple entrypoints on the same page
    // },
    splitChunks: {
      chunks: "all",
      //     chunks: 'initial',
      minSize: 80000,
      maxSize: 100000,
      cacheGroups: {
        antd: {
          name: "antd-chunk",
          // minSize: 100000,
          // maxSize: 150000,
          test: /antd/,
          priority: 4,
        },
        react: {
          name: "react-chunk",
          test: /react|react-dom|scheduler|classnames|moment|lodash/,
          priority: 3,
        },
      },
    },
    minimizer: [
      `...`, //表示默认的minimier: new TerserJSPlugin({})
      new HtmlWebpackPlugin({
        title: "Custom template for prod",
        template: "./src/index.html", //只有npm run build时生效？？？
      }),
      new CssMinimizerPlugin(),
    ],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react"],
          plugins: [require.resolve("react-refresh/babel")],
        },
      },
      {
        test: /\.less|.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: path.resolve(__dirname, "dist"),
            },
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
            options: {
              lessOptions: {
                javascriptEnabled: true,
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new AntdDayjsWebpackPlugin(),
    new WebpackBar({ profile: true, color: "lightblue" }),
    new ReactRefreshPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: isDev ? "[name].css" : "[name].[contenthash].css",
      chunkFilename: isDev ? "[id].css" : "[id].[contenthash].css",
      // chunkFilename: '[id].css', //set the filename as a number in production mode, not effect in dev mode
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
    new HtmlWebpackPlugin({
      //npm run dev时生效？？？
      cache: false,
      title: "Custom template plugins for dev",
      minify: !isDev,
      template: "./src/index.html",
    }),
  ],
  // externals: {
  //     react: "React",
  //     "react-dom": "ReactDOM",
  // }
});
